<template>
    <div class="chat-main">
        <chat-list class="chat-list"/>
        <div class="chat-main-right">
            <TitleBars v-if="isCustomTitle"></TitleBars>
            <chat-box class="chat-box"/>
        </div>
        
    </div>
</template>

<script>
import {
    reactive,
    toRefs,
    computed
} from "vue";
import ChatList from './chatlist.vue';
import ChatBox from './chatbox.vue';
import TitleBars from '@/components/TitleBars.vue'
import {useRouter} from 'vue-router';

export default {
    name: "ChatView",
    components: {
        ChatList,
        ChatBox,
        TitleBars
    },

    setup() {
        const state = reactive({
        });
        const router = useRouter();

        const isCustomTitle = computed(()=> {
            return router.currentRoute.value.meta.customTitle;
        });

        return {
            ...toRefs(state),
            isCustomTitle
        };
    },
};
</script>

<style lang="scss" scoped>
.chat-main {
    background: #f0f0f1;
    display: flex;
    height: 100%;
    width: 100%;

    .chat-list {
        width: 240px;
        border-right: 1px solid #dee0e2;
    }
    .chat-main-right {
        flex: 1;
        display: flex;
        flex-direction: column;

        .chat-box {
            flex: 1;
        }
    }

}
</style>

